﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>雷达图</title>
    <link href="css/base.css" rel="stylesheet" />
    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/Chart.js"></script>
</head>
<body>
    <div class="container">
        <canvas id="myChart" width="400" height="400"></canvas>
    </div>
    <script type="text/javascript">
        var data = {
            labels: ["Eating", "Drinking", "Sleeping", "Designing"],
            datasets: [
                
                {
                    fillColor: "rgba(151,187,205,0.5)",
                    strokeColor: "rgba(151,187,205,1)",
                    pointColor: "rgba(151,187,205,1)",
                    pointStrokeColor: "#fff",
                    data: [58, 78, 95, 60]
                },
                {
                    fillColor: "rgba(255, 163, 163, 0.2)",
                    strokeColor: "rgba(255, 163, 163,.3)",
                    pointColor: "rgba(255, 163, 163,.3)",
                    pointStrokeColor: "#fff",
                    data: [75, 59, 68, 91]
                }
            ]
        }
        var Radar = {   

            //Boolean - If we show the scale above the chart data			
            scaleOverlay: true,

            //Boolean - If we want to override with a hard coded scale
            scaleOverride: true,

            //** Required if scaleOverride is true **
            //Number - The number of steps in a hard coded scale
            scaleSteps: 10,
            //Number - The value jump in the hard coded scale
            scaleStepWidth:10,
            //Number - The centre starting value
            scaleStartValue: 0,

            //Boolean - Whether to show lines for each scale point
            scaleShowLine: true,

            //String - Colour of the scale line	
            scaleLineColor: "rgba(0,0,0,.1)",

            //Number - Pixel width of the scale line	
            scaleLineWidth: 1,

            //Boolean - Whether to show labels on the scale	
            scaleShowLabels: false,

            //Interpolated JS string - can access value
            scaleLabel: "<%=value%>",

            //String - Scale label font declaration for the scale label
            scaleFontFamily: "'Arial'",

            //Number - Scale label font size in pixels	
            scaleFontSize: 12,

            //String - Scale label font weight style	
            scaleFontStyle: "normal",

            //String - Scale label font colour	
            scaleFontColor: "#666",

            //Boolean - Show a backdrop to the scale label
            scaleShowLabelBackdrop: true,

            //String - The colour of the label backdrop	
            scaleBackdropColor: "rgba(255,255,255,0.75)",

            //Number - The backdrop padding above & below the label in pixels
            scaleBackdropPaddingY: 2,

            //Number - The backdrop padding to the side of the label in pixels	
            scaleBackdropPaddingX: 2,

            //Boolean - Whether we show the angle lines out of the radar
            angleShowLineOut: true,

            //String - Colour of the angle line
            angleLineColor: "rgba(0,0,0,.1)",

            //Number - Pixel width of the angle line
            angleLineWidth: 1,

            //String - Point label font declaration
            pointLabelFontFamily: "'Arial'",

            //String - Point label font weight
            pointLabelFontStyle: "normal",

            //Number - Point label font size in pixels	
            pointLabelFontSize: 12,

            //String - Point label font colour	
            pointLabelFontColor: "#666",

            //Boolean - Whether to show a dot for each point
            pointDot: true,

            //Number - Radius of each point dot in pixels
            pointDotRadius: 3,

            //Number - Pixel width of point dot stroke
            pointDotStrokeWidth: 1,

            //Boolean - Whether to show a stroke for datasets
            datasetStroke: true,

            //Number - Pixel width of dataset stroke
            datasetStrokeWidth: 2,

            //Boolean - Whether to fill the dataset with a colour
            datasetFill: true,

            //Boolean - Whether to animate the chart
            animation: true,

            //Number - Number of animation steps
            animationSteps: 60,

            //String - Animation easing effect
            animationEasing: "easeOutQuart",

            //Function - Fires when the animation is complete
            onAnimationComplete: null

        }
        var ctx =$("#myChart")[0].getContext("2d");
        var radar = new Chart(ctx);
        radar.Radar(data,Radar);

    </script>
</body>
</html>
